<template>


  <div class="merak-container-has-aside" curPageName="transPage123123213123123123213">
    <div class="merak-aside">
      <!-- :class="!defaultClickLevel?'merakTree':'merakTree noThree'" -->
      <TreeFilter v-if="treeLeft" ref="treeFilterRef" label="title" :defaultExpand="false" class="merakTree" :class="{'noThree':defaultClickLevel}"
        :data="pageData.menuList" :default-value="page_parents_id" @change="changeTreeFilter"></TreeFilter>

    </div>
    <div v-waterMarker="{zIndex: 10}"  class="merak-card merak-container-has-search">
      <!-- 搜索模块儿 -->
      <div>
        <!-- $t("translation_manage.value_ru") -->
        <serachBar custom_class="myclass"
          :placeholder="`${$t('translation_manage.value_cn')}/${$t('translation_manage.value_ru')}`"
          :close-advanced="true" :search_val="search_val" @searchEvent="searchFn">
          <template #footer>
            <el-button type="primary" v-auth="{'authArr':authArr,'key':'translationMore'}" v-show="!transPath"
              @click="onPlusMore">{{$t("translation_manage.add_translation_more")}}</el-button>
            <el-button type="primary" v-auth="{'authArr':authArr,'key':'translationAdd'}" v-show="!!transPath"
              @click="onPlus">{{$t("translation_manage.add_translation")}}</el-button>
            <!-- v-if="authArr.translation?.show" -->
            <el-button type="primary" v-auth="{'authArr':authArr,'key':'translationSync'}" plain
              @click="simultaneousTrans">{{$t("translation_manage.sync_translation")}}</el-button>
          </template>
        </serachBar>
      </div>


      <!-- 表格 -->
      <div class="merak-table-wrapper">
        <MerakXTable ref="tableRef" v-if="tableBool" :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
          :query-columns="handleQueryColumns" :query-data="handleQueryData" :params="state.params"
          :batch-click="handleBatchClick" :column-type="columnType" :batches="[
                { text: '批量修改', color: 'green',type:'moreUpdate' } ]">
          <template #handler="{ row }">
            <div style="display: flex">
              <el-button class="qf_btn_auto" type="primary" link v-auth="{'authArr':authArr,'key':'translationEdit'}"
                @click="saveEdit(row)"> {{$t("merak.edit")}} </el-button>
              <el-button class="qf_btn_auto" type="danger" link v-auth="{'authArr':authArr,'key':'translationDel'}"
                @click="delTranslation(row)"> {{$t("merak.delete")}}
              </el-button>
            </div>
          </template>
        </MerakXTable>
      </div>




    </div>

    <div>
      <!-- 新增抽屉start -->

      <el-dialog modal-class="merak_modal" v-model="drawerTranslation" direction="rtl" :close-on-click-modal="false"
        :close-on-press-escape="false" width="600">
        <template #header>
          <div class="merak_modal_title">{{ translationTitle }}</div>
        </template>
        <div class="translationPad">
          <el-form :model="translationForm" ref="translationRef" :rules="translationRules" label-position="top">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="路由path" prop="category">
                  <el-input class="qf_input" v-model="translationForm.category" />
                  <div class="form_tooltip">例(path):/app/index</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="键值key" prop="message">
                  <el-input class="qf_input" v-model.trim="translationForm.message" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="中文zh" prop="value_cn">
                  <el-input class="qf_textare" type="textarea" maxlength="300" :autosize="{ minRows: 3, maxRows: 5 }"
                    v-model="translationForm.value_cn" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="俄文ru" prop="value_ru">
                  <el-input class="qf_textare" type="textarea" maxlength="300" :autosize="{ minRows: 3, maxRows: 5 }"
                    v-model="translationForm.value_ru" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <template #footer>
          <el-button type="default" @click="cancelEmpty(translationRef)"> {{$t("merak.cancel")}}</el-button>
          <el-button type="primary" plain v-if="editShow" @click="saveContinue('2', translationRef)">
            {{$t("merak.save_continue")}}</el-button>
          <el-button type="primary" @click="submitForm('1', translationRef)">{{$t("merak.save")}}</el-button>
        </template>
      </el-dialog>

      <!-- 新增抽屉end -->

      <!-- 日志批量新增抽屉start -->

      <el-dialog modal-class="merak_modal" v-model="drawerTranslationMore" direction="rtl" :close-on-click-modal="false"
        :close-on-press-escape="false" width="600">
        <template #header>
          <div class="merak_modal_title">{{ translationTitle }}</div>
        </template>
        <div class="translationPad">
          <el-form :model="translationFormMore" ref="translationMoreRef" :rules="translationRulesMore"
            label-position="top">

            <el-form-item label="路由path" prop="categoryLog">
              <el-input class="qf_input" v-model="translationFormMore.categoryLog">
                <template #prepend>log_</template>
              </el-input>
              <div class="form_tooltip">例 : log_sys</div>
            </el-form-item>


            <el-form-item label="中文zh" prop="translation_cn">
              <template #label>
                中文zh<el-tooltip placement="top">
                  <template #content> [
                    'add' => '新增',
                    'edit' => '编辑'
                    ] </template>
                  <el-icon color="#409EFC" class="el-input__icon">
                    <InfoFilled />
                  </el-icon>
                </el-tooltip>
              </template>
              <el-input class="qf_textare" type="textarea" placeholder="
              [ 
                  'key1' => 'value',
                  'key2' => 'value' 
               ]"   :autosize="{ minRows: 5, maxRows: 10 }"
                v-model.trim="translationFormMore.translation_cn" />
            </el-form-item>

            <el-form-item label="俄文ru" prop="translation_ru">
              <template #label>
                俄文ru<el-tooltip placement="top">
                  <template #content> [
                    'add' => '新增',
                    'edit' => '编辑'
                    ] </template>
                  <el-icon color="#409EFC" class="el-input__icon">
                    <InfoFilled />
                  </el-icon>
                </el-tooltip>
              </template>
              <el-input class="qf_textare" type="textarea"   placeholder="
              [ 
                  'key1' => 'value',
                  'key2' => 'value' 
              ]" :autosize="{ minRows: 5, maxRows: 10 }" v-model.trim="translationFormMore.translation_ru" />
            </el-form-item>

          </el-form>
        </div>

        <template #footer>
          <el-button type="default" @click="cancelEmptyMore(translationMoreRef)"> {{$t("merak.cancel")}}</el-button>
          <el-button type="primary" plain v-if="editShow" @click="saveContinueMore('2', translationMoreRef)">
            {{$t("merak.save_continue")}}</el-button>
          <el-button type="primary" @click="submitFormMore('1', translationMoreRef)">{{$t("merak.save")}}</el-button>
        </template>
      </el-dialog>

      <!-- 日志批量新增抽屉end -->


      <!-- 批量翻译抽屉start -->

      <el-dialog modal-class="merak_modal" v-model="drawerTranslationMoreUpdate" direction="rtl"
        :close-on-click-modal="false" :close-on-press-escape="false" width="600">
        <template #header>
          <div class="merak_modal_title">{{ translationMoreTitle }}</div>
        </template>
        <div class="translationPad">
          <el-form :model="translationMoreUpdate" ref="translationMoreUpdateRef" :rules="translationRulesMoreUpdate"
            label-position="top">


            <el-form-item label="中文zh" prop="value_cn">
              <template #label>
                中文zh
              </template>
              <el-input class="qf_textare" type="textarea" maxlength="500" :autosize="{ minRows: 5, maxRows: 10 }"
                v-model.trim="translationMoreUpdate.value_cn" />
            </el-form-item>

            <el-form-item label="俄文ru" prop="value_ru">
              <template #label>
                俄文ru
              </template>
              <el-input class="qf_textare" type="textarea" maxlength="500" :autosize="{ minRows: 5, maxRows: 10 }"
                v-model.trim="translationMoreUpdate.value_ru" />
            </el-form-item>

          </el-form>
        </div>

        <template #footer>
          <el-button type="default" @click="cancelEmptyMoreUpdate(translationMoreUpdateRef)">
            {{$t("merak.cancel")}}</el-button>
          <el-button type="primary"
            @click="submitFormMoreUpdate('1', translationMoreUpdateRef)">{{$t("merak.save")}}</el-button>
        </template>
      </el-dialog>

      <!-- 批量翻译抽屉end -->
    </div>
  </div>







</template>

<script lang="tsx" setup name="translationManageTest">
  // @ts-nocheck
  import { Plus, Edit, Delete, EditPen } from "@element-plus/icons-vue";

  import TreeFilter from "@/components/TreeFilter/index.vue";

  import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, nextTick } from "vue";
  import serachBar from "@/components/SearchBar/index";
  import MerakXTable, { MerakXTableInstance, MerakXTableColumn, MerakXTableQuery } from "@/components/MerakXTable";
  import {
    moreConfirm,
    confirmWarningMsg,
    successMsg,
    warnMsg,
    failMsg,
    confirmSuccessMsg,
    delConfimMsg
  } from "@/utils/messageUtils";
  import {
    getAllTranslationHeadApi,
    getAllTranslationListApi,
    saveCreateTranslation,
    saveEditTranslation,
    delTranslationOne,
    publishJs,
    saveCreateTranslationMoreApi,
    saveCreateTranslationMoreUpdateApi
  } from "@/api/modules/sysManage/translation";
  import { getAllMenuListApi } from "@/api/modules/permission";
  import { translationForm } from "../interface.ts";
  import { getLocationParams } from "@/utils/index";
  import MerakIcon from "@/components/MerakIcon/index.vue";

  import type { ElForm } from "element-plus";
  import { ElMessage } from "element-plus";
  type FormInstance = InstanceType<typeof ElForm>;
  const translationRef = ref < FormInstance > ();

  const { proxy } = getCurrentInstance();

  const tableRef = ref < MerakXTableInstance > ();


  //#region 树结构 

  const pageData = reactive({
    menuList: [],//全部菜单
    stairList: [],//一级菜单
    secondList: [],//二级菜单
    threeList: [],//三级菜单
  });
  const transPath = ref("");//路径参数
  const page_parents_id = ref("");
  const curlevel = ref(3);
  const defaultClickLevel = ref(false);
  const treeFilterRef = ref();
  const treeLeft=ref(false);
  onMounted(async () => {
    const { data } = await getAllMenuListApi();

    const newUrl = new URL(window.location.href);

    let urlId = getLocationParams(newUrl.href, 'id');
    page_parents_id.value = urlId || 9999;
 
    let menuList = data.list;
    let otherList = [{
      title: "全部",
      level: 1,
      id: 9999,
      trans_path: ''
    },
    {
      title: "通用",
      level: 1,
      id: 9998,
      trans_path: 'merak'
    }]
    pageData.menuList = [...otherList, ...menuList];
    let newList: any = [];
    data.list.map((stairItem: any, stairIndex: number) => {
      newList.push(stairItem)
    })
    pageData.stairList = newList;
    treeLeft.value=true;
  })


  const changeTreeFilter = (row) => {

    let { id, level, trans_path, children } = row;
    page_parents_id.value = id;
    curlevel.value = level;
    defaultClickLevel.value = false;
    if (row.children && level == 1) {
      treeFilterRef.value.treeRef.setCurrentKey(null);//设置不选中
      defaultClickLevel.value = true;
      return;
    }




    state.params.category = trans_path;
    // 构建新的URL
    const newUrl = new URL(window.location.href);
    //console.log(newUrl)
    newUrl.searchParams.set('id', id);
    transPath.value = trans_path;

    // 使用pushState更新浏览器历史记录
    window.history.pushState({}, '', newUrl.toString());


    tableBool.value = false
    nextTick(() => {
      tableBool.value = true;
    })



  };

  //#endregion

  //#region 批量编辑
  const translationMoreUpdateRef = ref(null);
  const translationMoreTitle = ref('批量编辑');
  const drawerTranslationMoreUpdate = ref(false);
  const translationMoreUpdate = reactive({
    id: [],
    value_cn: "",
    value_ru: ""
  })

  const translationRulesMoreUpdate = reactive({
    value_cn: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],

    value_ru: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }]
  })
  const handleBatchClick: MerakXTableInstance["batchClick"] = async params => {
    // console.log(params);
    if (params.type == "moreUpdate") {//批量编辑
      drawerTranslationMoreUpdate.value = true;//打开批量编辑
      translationMoreUpdateRef.value?.resetFields(); 
      translationMoreUpdate.id=params.selectedKeys;
      translationMoreUpdate.value_cn="";
      translationMoreUpdate.value_ru="";  
    }

      
  };

  const submitFormMoreUpdate = async (typebtn: string, formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        //保存
 
        console.log(translationMoreUpdate)

        saveCreateTranslationMoreUpdateApi(translationMoreUpdate).then(res => {
          console.log(res);
          if (res.code == ResultEnum.SUCCESS) {
            successMsg("保存成功!");
        
              //关闭弹窗
              drawerTranslationMoreUpdate.value = false;
              formEl.value?.resetFields();
             tableRef.value?.finishedBatch() ;
            tableRef.value?.reloadData();
          } else {
            failMsg(res.message);
          }



        },
          err => {
            failMsg(err);
          })
      } else {
        console.log("error submit!", fields);
      }
    });
  };


  const cancelEmptyMoreUpdate = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    drawerTranslationMoreUpdate.value = false;
  };
  //#endregion


  //#region 搜索表单
  let tableBool = ref(false);//表格true
  let search_val = ref("");
  const searchFn = e => {
    console.log(e);
    // e.searchVal
    state.params.key_words = e.search;
  };

  //#endregion

  //#region  同步翻译 publishJs
  const simultaneousTrans = () => {
    publishJs().then(res => {
      if (res.code == ResultEnum.SUCCESS) {
        successMsg("同步成功!请重新加载。");
      }
    });
  };

  //#endregion

  //#region 新增、编辑、删除
  const drawerTranslation = ref(false);
  const translationTitle = ref("新增翻译管理");
  //表单参数结构
  const translationForm = ref < translationForm > ({
    id: 0,
    category: transPath,
    message: "",
    value_cn: "",
    value_ru: ""
  });
  const translationRules = reactive({
    category: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
    message: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
    // value_cn: [{ validator: validateAuthKey, trigger: "blur" }],
    value_cn: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],

    value_ru: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }]
  });
  const validateAuthKey = (rule: any, value: any, callback: any) => {
    if (value === "") {
      callback(new Error(proxy.$t("main.requiredMsg")));
    } else {
      let reg = /^[a-zA-Z]+_[a-zA-Z]+$/;

      if (reg.test(value)) {
      } else {
        callback(new Error("必须是英文+下划线+英文  demo_show/action"));
      }
      callback();
    }
  };
  //新增操作
  const onPlus = () => {
    translationForm.value = {
      id: 0,
      category: transPath,
      message: "",
      value_cn: "",
      value_ru: ""
    };
    editShow.value = true;
    //打开弹窗
    translationTitle.value = "新增翻译";
    drawerTranslation.value = true;
  };
  //保存并继续
  const saveContinue = (typebtn: string, formEl: FormInstance | undefined) => {
    submitForm(typebtn, formEl);
  };

  const submitForm = async (typebtn: string, formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        //保存
        postAdd(typebtn, formEl);
        console.log("submit!");
      } else {
        console.log("error submit!", fields);
      }
    });
  };
  //新增
  /**
   * typebtn 1保存 2保存并继续
   */
  const postAdd = (typebtn: string, formEl: FormInstance | undefined) => {
    //新增
    translationForm.value.value_cn=translationForm.value.value_cn.trim();
    translationForm.value.value_ru=translationForm.value.value_ru.trim();
    saveCreateTranslation(translationForm.value).then(
      res => {
        console.log(res);
        if (res.code == ResultEnum.SUCCESS) {
          successMsg("保存成功!");
          if (typebtn == 1) {
            //关闭弹窗
            drawerTranslation.value = false;
            formEl.resetFields();
          } else {
            let resetObj = {
              message: "",
              value_cn: "",
              value_ru: ""
            };
            translationForm.value = { ...translationForm.value, ...resetObj };
            formEl.value?.resetFields();
          }

          tableRef.value?.reloadData();
        }
        if (res.code == ResultEnum.ERROR) {
          failMsg(res.message);
        }
      },
      err => {
        console.log(err);
      }
    );


  };
  //编辑
  const postEdit = () => { };
  //编辑
  let editShow = ref(true);
  const saveEdit = (row: translationForm) => {
    translationForm.value = JSON.parse(JSON.stringify(row));
    //打开弹窗
    drawerTranslation.value = true;
    editShow.value = false;
    translationTitle.value = "编辑翻译";
  };

  //取消
  const cancelEmpty = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    drawerTranslation.value = false;
  };

  //删除
  const delTranslation = (row: translationForm) => {
    // delTranslationOne
    delConfimMsg({
      callback: val => {
        if (val == "confirm") {
          delOne(row);
        }
      }
    });
  };

  const delOne = (row: translationForm) => {
    delTranslationOne({ id: row.id }).then(res => {
      successMsg("删除成功!");
      setTimeout(() => {
        tableRef.value?.reloadData();
      }, 500);
    });
  };
  //#endregion


  //#region 批量添加
  const translationMoreRef = ref < FormInstance > ();
  const drawerTranslationMore = ref(false);

  //表单参数结构
  const translationFormMore = ref < any > ({
    id: 0,
    categoryLog: '',
    translation_ru: "",
    translation_cn: ""
  });
  const translationRulesMore = reactive({
    categoryLog: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
    translation_cn: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
    translation_ru: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }]
  });
  const onPlusMore = () => {
    drawerTranslationMore.value = true;
    translationFormMore.value = {
      id: 0,
      categoryLog: '',
      translation_ru: "",
      translation_cn: ""
    }
    translationMoreRef.value?.resetFields();
  }

  //保存并继续
  const saveContinueMore = (typebtn: string, formEl: FormInstance | undefined) => {
    submitFormMore(typebtn, formEl);
  };
  const submitFormMore = async (typebtn: string, formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        //保存
        //新增
        translationFormMore.value.category = `log_${translationFormMore.value.categoryLog}`;
        saveCreateTranslationMoreApi(translationFormMore.value).then(
          res => {
            console.log(res);
            if (res.code == ResultEnum.SUCCESS) {
              successMsg("保存成功!");
              if (typebtn == 1) {
                //关闭弹窗
                drawerTranslationMore.value = false;
                formEl.resetFields();
              } else {
                let resetObj = {
                  category: "",
                  translation_ru: "",
                  translation_cn: ""
                };
                translationFormMore.value = { ...translationFormMore.value, ...resetObj };
                formEl.value?.resetFields();
              }

              tableRef.value?.reloadData();
            }
            if (res.code == ResultEnum.ERROR) {
              failMsg(res.message);
            }
          },
          err => {
            console.log(err);
          }
        );

      } else {
        console.log("error submit!", fields);
      }
    });
  };
  //取消
  const cancelEmptyMore = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    drawerTranslationMore.value = false;
  };

  //#endregion




  const columnType = ref(['selection', { type: 'handle', width: proxy.$t("lang") == 'zh' ? 150 : 250, slot: 'handler' }]);
  const state = reactive < {
    params: Record < string, any>;
  columns: MerakXTableColumn[];
  }> ({
    params: {
      key_words: ""
    },
    columns: []
  });

  //权限数据
  let authArr = ref({});

  //列表内容展示区
  const handleQueryData: MerakXTableInstance["queryData"] = async ({ page, sorts, filters, from }) => {
    const params: Record<string, any> = {};
    if (!!page) {
      Object.assign(params, { ...page }, from);
    }
    return await getAllTranslationListApi(params).then(res => {
      let authArrNew = res?.auth_list;
      authArr.value = authArrNew;
      console.log(authArr, "authArr")
      if (authArrNew) {
        if (!authArrNew.translationEdit.show && authArrNew.translationDel.show) {
          columnType.value = ['selection'];
        }
      }
      // const ColumnType=['selection', { type: 'handle', width: 200, slot: 'handler' }];

      if (res.code == ResultEnum.SUCCESS) {
        let data = res.data;


        const { table_data, language } = data as { table_data: Record<string, any>; language: Record<string, any> };

        return table_data;
      }
    });
  };

  //表头信息
  const handleQueryColumns: MerakXTableInstance["queryColumns"] = async () => {
    return await getAllTranslationHeadApi().then(res => {
      if (res.code == ResultEnum.SUCCESS) {
        let data = res.data as MerakXTableQuery.Columns;
        // const { pageSize, columns } = data as { pageSize: number; columns: MerakXTableColumn[] };
        state.columns = JSON.parse(JSON.stringify(data.columns));

        return {
          ...data,
          columns: [...data.columns].map(column => {
            switch (column.field) {
              case "value_cn":
                column.slots = {
                  ...(column.slots ?? {}),
                  default: ({ row }) => {
                    const copy = () => {
                      navigator.clipboard
                        .writeText(row.value_cn)
                        .then(() => {
                          ElMessage.success("复制成功");
                        })
                        .catch(() => {
                          throw "当前浏览器不支持 copy api";
                        });
                    };
                    return (
                      <div style="display: flex; cursor: pointer;" onClick={copy}>
                        <MerakIcon size={14} style="color:#A0A3A9">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
                          </svg>
                        </MerakIcon>
                        <span style="margin-left: 5px;">{row.value_cn}</span>
                      </div>
                    );
                  }
                };
                break;
              case "value_ru":
                column.slots = {
                  ...(column.slots ?? {}),
                  default: ({ row }) => {
                    const copy = () => {
                      navigator.clipboard
                        .writeText(row.value_ru)
                        .then(() => {
                          ElMessage.success("复制成功");
                        })
                        .catch(() => {
                          throw "当前浏览器不支持 copy api";
                        });
                    };
                    return (
                      <div style="display: flex; cursor: pointer;" onClick={copy}>
                        <MerakIcon size={14} style="color:#A0A3A9">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
                          </svg>
                        </MerakIcon>
                        <span style="margin-left: 5px;">{row.value_ru}</span>
                      </div>
                    );
                  }
                };
                break;
              case "message":
                column.slots = {
                  ...(column.slots ?? {}),
                  default: ({ row }) => {
                    const text = `${row.category}.${row.message}`;
                    const copy = () => {
                      navigator.clipboard
                        .writeText(text)
                        .then(() => {
                          ElMessage.success("复制成功");
                        })
                        .catch(() => {
                          throw "当前浏览器不支持 copy api";
                        });
                    };
                    return (
                      <div style="display: flex; cursor: pointer;" onClick={copy}>
                        <MerakIcon size={14} style="color:#A0A3A9">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
                          </svg>
                        </MerakIcon>
                        <span style="margin-left: 5px;">{row.message}</span>
                      </div>
                    );
                  }
                };
                break;
              default:
                break;
            }
            return column;
          })
        };
      }
    });
  };
</script>

<style scoped lang="scss">
  .content-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    .descriptions-box {
      flex: 1;
      height: 100%;
      background-color: var(--el-bg-color);
      padding: 15px;
      box-sizing: border-box;

      .buttonList {
        margin-top: 8px;
      }
    }

  }

  .descriptions-box {
    min-width: 0;
  }

  .action_btn.text-right {
    text-align: right;
  }




  /* :deep(.filter.noThree .el-tree-node.is-current .el-tree-node__content)  {

    background-color: #fff !important; 
  }

  :deep(.filter.noThree .el-scrollbar .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .el-tree-node__expand-icon) {
    color: var(--el-tree-expand-icon-color) !important;
  }
  :deep(.filter.noThree .el-scrollbar .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .el-tree-node__label)
   {
    color: var(--el-tree-text-color) !important;

 
  } */
</style>